<template>
  <div class="btn">
    <div class="batch_btn">
      <a-button type="primary" :disabled="!hasSelected" @click="ChangeOperation(40001)"> 批量发布 </a-button>
      <a-button type="primary" :disabled="Deactivate" @click="ChangeOperation(40002)"> 批量停用 </a-button>
      <a-button type="primary" :disabled="!hasSelected" @click="ChangeBatchClassify"> 批量分类 </a-button>
    </div>
    <!-- <router-link to="/ArtificialRegister"> -->
    <a-button class="button" @click="toArtificialRegister">人工注册</a-button>
  </div>
  <a-table
    :columns="columns"
    :data-source="data"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, preserveSelectedRowKeys: true }"
    :row-key="(record:any) => record.apiCode"
    :locale="{
      cancelSort: '点击取消排序',
      triggerAsc: '点击升序',
      triggerDesc: '点击降序',
    }"
    :loading="loading"
    :pagination="pageOptions"
  >
    <template #bodyCell="{ column, record }">
      <!-- 数据资产表中文名称 -->
      <template v-if="column.dataIndex === 'apiName'">
        <a-button type="link" style="font-weight: 500; color: #008af7" @click="showModal(record)">{{ record.apiName }}</a-button>
      </template>
      <!-- 状态 -->
      <template v-else-if="column.dataIndex === 'apiStatus'">
        <a-tag :color="record.statusColor">{{ record.apiStatus }}</a-tag>
      </template>
      <!-- 操作 -->
      <template v-else-if="column.dataIndex === 'options'">
        <div style="display: flex">
          <a-button type="link" @click="connectTest(record)">接口测试</a-button>
          <!-- 未发布 -->
          <span v-show="record.apiStatus === '未发布'" class="list_btn">
            <a-popconfirm placement="topRight" ok-text="是" cancel-text="否" @confirm="releaseOrOutage(record, 40001)">
              <template #title>
                <p>是否将接口状态更改为发布</p>
              </template>
              <a-button type="link">发布</a-button>
            </a-popconfirm>

            <a-button type="link" @click="apiUpdate(record.apiCode)">编辑</a-button>

            <a-popconfirm placement="topRight" ok-text="是" cancel-text="否" @confirm="delApi(record.apiCode)">
              <template #title>
                <p>是否删除接口</p>
              </template>
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </span>
          <!-- 已发布 -->
          <span v-show="record.apiStatus === '已发布'" class="list_btn">
            <a-popconfirm placement="topRight" ok-text="是" cancel-text="否" @confirm="releaseOrOutage(record, 40002)">
              <template #title>
                <p>是否将接口状态更改为停用</p>
              </template>
              <a-button type="link" danger>停用</a-button>
            </a-popconfirm>
          </span>
          <!-- 已停用 -->
          <span v-show="record.apiStatus === '已停用'" class="list_btn">
            <a-popconfirm placement="topRight" ok-text="是" cancel-text="否" @confirm="releaseOrOutage(record, 40001)">
              <template #title>
                <p>是否将接口状态更改为发布</p>
              </template>
              <a-button type="link" danger>发布</a-button>
            </a-popconfirm>

            <a-button type="link" @click="apiUpdate(record.apiCode)">编辑</a-button>
          </span>
        </div>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
  import { operationStatus } from '../../CodeTables/specification';
  import { getInterfaceManagementHook } from '@/hooks/InterfaceManagementHooks/getInterfaceManagementHooks';
  import { getInterfaceDetailsHooks } from '@/hooks/InterfaceManagementHooks/getInterfaceDetailsHooks';
  import { changeInterfaceState, delInterface } from '@/api/test';
  import { selectChangeHooks } from '@/hooks/onSelectChangeHooks';
  import { useRouter } from 'vue-router';
  // 表头
  const columns = [
    {
      title: '接口名称',
      dataIndex: 'apiName',
      width: '10%',
      align: 'center',
    },
    {
      title: '接口描述',
      dataIndex: 'apiDescribe',
      align: 'center',
      width: '12%',
    },
    {
      title: '接口分类',
      dataIndex: 'directoryName',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '接口来源',
      dataIndex: 'apiSource',
      width: '10%',
      align: 'center',
      ellipsis: true,
    },
    {
      title: 'API状态',
      dataIndex: 'apiStatus',
      width: '10%',
      align: 'center',
    },
    {
      title: '更新时间',
      width: '12%',
      dataIndex: 'updateTime',
      align: 'center',
      sorter: {
        compare: (a: any, b: any) => (a.updateTime > b.updateTime ? 1 : -1),
        multiple: 3,
      },
      sortDirections: ['ascend', 'descend'],
    },
    {
      title: '操作',
      width: '25%',
      align: 'center',
      dataIndex: 'options',
    },
  ];
  // 引入hooks
  const { selectedRowKeys, hasSelected, Deactivate, selectStopwatch, onSelectChange } = selectChangeHooks();
  const { dislog, apiCode, getDetail } = getInterfaceDetailsHooks();
  const { data, tableData, loading, getList } = getInterfaceManagementHook();

  // 监听被选中的列表状态
  watch(
    () => selectStopwatch.value,
    nv => {
      Deactivate.value = false;
      if (nv.length == 0) {
        Deactivate.value = true;
      } else {
        nv.forEach((item: { [arg: string]: any }) => {
          if (item.apiStatus == '未发布') {
            Deactivate.value = true;
          }
        });
      }

      console.log(' Deactivate.value ' + Deactivate.value);
    },
    { deep: true },
  );

  // 打开详情
  const showModal = (e: any) => {
    console.log(e);
    apiCode.value = e.apiCode;
    dislog.details = true;
    getDetail();
  };
  // 接口测试
  const connectTest = (record: any) => {
    apiCode.value = record.apiCode;
    dislog.test = true;
    getDetail();
  };
  //批量按钮操作--发布--停用
  const ChangeOperation = async (e: 40001 | 40002) => {
    loading.value = true;
    const deliverInfo: operationStatus = {
      status: e,
      codeList: selectedRowKeys.value as [string],
    };
    const res = await changeInterfaceState(deliverInfo);
    console.log(res);
    tableData.pageNum = 1;
    getList();
    selectedRowKeys.value = [];
    selectStopwatch.value = [];
  };
  // 批量分类
  const ChangeBatchClassify = () => {
    dislog.Classification = true;
  };
  // 发布--停用
  const releaseOrOutage = async (e: any, status: 40001 | 40002) => {
    const deliverInfo: operationStatus = {
      status: status,
      codeList: [e.apiCode],
    };
    const res = await changeInterfaceState(deliverInfo);
    console.log(res);
    tableData.pageNum = 1;
    getList();
  };
  // 删除
  const delApi = async (apiCode: string) => {
    console.log(apiCode);

    loading.value = true;
    await delInterface(apiCode);
    getList();
  };

  // 分页
  const pageOptions = computed(() => {
    return {
      total: tableData.total,
      current: tableData.pageNum,
      pageSize: tableData.pageSize,
      defaultPageSize: 10,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '30'],
      showQuickJumper: true,
      showTotal: () => `共${tableData.total}条`,
      onChange: (pageNum: number, pageSize: number) => {
        tableData.pageNum = pageNum;
        tableData.pageSize = pageSize;
        getList();
      },
    };
  });
  // 人工注册跳转
  const router = useRouter();
  const toArtificialRegister = () => {
    router.push('/ArtificialRegister');
  };

  //编辑
  const apiUpdate = async (e: string) => {
    apiCode.value = e;
    await getDetail();
    router.push('/ArtificialRegister');
  };
  // 编辑
</script>

<style lang="less" scoped>
  :deep(.ant-table-thead > tr > th) {
    font-weight: 600;
    background: rgb(238, 238, 238);
  }

  .btn {
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;

    .batch_btn {
      display: flex;
      justify-content: space-evenly;
      width: 30%;
    }
  }

  :deep(.ant-table) {
    overflow-y: auto;
    height: calc(100vh - 340px);
    box-shadow: inset 0 -20px 20px -20px #9e9e9e57;

    :deep(.ant-table-row) {
      height: 100px;
    }
  }

  :deep(.ant-table-body) {
    min-height: 360px;
    // box-shadow: inset 0 -20px 20px -20px #9e9e9e57;

    table {
      height: 360px;
    }
  }

  .list_btn {
    display: flex;
    flex-wrap: wrap;

    .ant-btn {
      padding: 5px;
    }
  }

  .button {
    // outline: 4px solid rgb(35, 236, 62);
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: none;
    border-radius: 6px;
    color: rgb(13, 173, 236);
    background: rgb(253, 253, 253);
    outline: none;

    ::before {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: -2;
      width: 200%;
      height: 200%;
      background: rgb(16, 191, 245);
      content: '';
      transform-origin: 0 0;
      animation: rotate 3s infinite linear;
    }

    ::after {
      position: absolute;
      top: 2px;
      left: 2px;
      z-index: -1;
      border-radius: 6px;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      background: rgb(253, 253, 253);
      content: '';
      transform-origin: 0 0;
      // animation: rotate 3s infinite linear;
    }
  }
  @keyframes rotate {
    to {
      transform: rotate(1turn);
    }
  }
</style>
